// 成绩申诉填写
<template>
  <div class="box">
    <!-- 导航和下拉框部分 -->
    <div style="margin-top: 20px; font-size: 13px;">
      年份:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-select v-model="yearNumber" @change="apply">
        <el-option v-for="year in yearOptions" :key="year.value" :label="year.label" :value="year.value"></el-option>
      </el-select>
    </div>
    <div style="margin-left: 350px; margin-top: -35px; font-size: 13px;">
      申诉类型:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-select v-model="state_type" @change="apply">
        <el-option v-for="type in appealTypeOptions" :key="type.value" :label="type.label" :value="type.value"></el-option>
      </el-select>
    </div>
    <div style="margin-left:700px; margin-top: -35px; font-size: 13px;">
      申诉状态:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-select v-model="state_allege" @change="apply">
        <el-option v-for="status in statusOptions" :key="status.value" :label="status.label" :value="status.value"></el-option>
      </el-select>
    </div>
    <el-button type="primary" icon="el-icon-download" plain size="small" style="margin-top: 20px;margin-bottom: 1%;"
      @click="derive">导出</el-button>
    <!-- 表格部分 -->
    <el-table border :data="tableData" style="margin-top: 20px; width: 96%" :row-class-name="tableRowClassName">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" prop="year" label="年份" width="180"></el-table-column>
      <el-table-column align="center" prop="state_type" label="申诉类型" width="180"></el-table-column>
      <el-table-column align="center" prop="reasonfor_application_reason" label="申请理由"></el-table-column>
      <el-table-column align="center" prop="auditopinionyhc" label="审核意见"></el-table-column>
      <el-table-column align="center" prop="state_allege" label="申诉状态"></el-table-column>
      <el-table-column align="center" prop="assessment_object" label="附件" width="180"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { aply, getType, getState, getYear } from "../../../api/zhenfu/shensu"

export default {
  data() {
    return {
      tableData: [],
      yearNumber: "",
      state_type: "",
      state_allege: "",
      yearOptions: [],   
      appealTypeOptions: [], 
      statusOptions: [], 
      open: false,
      Loading: false
    }
  },
  created() {
    this.loadOptions();
    this.loadData();
  },
  methods: {
    async loadOptions() {
    try {
      const [typeResponse, stateResponse] = await Promise.all([
        getType(),
        getState()
      ]);

      if (typeResponse.success && stateResponse.success) {
        this.appealTypeOptions = JSON.parse(typeResponse.message);
        this.statusOptions = JSON.parse(stateResponse.message);
      } else {
        this.$message.error("选项获取失败");
      }
    } catch (error) {
      console.error("选项加载失败:", error);
      this.$message.error("选项加载失败");
    }
  },
    
    apply() {
      this.loadData();
    },
    
    async loadData() {
      this.Loading = true;
      try {
        const response = await aply( this.appealType, this.statet);
        if (response.success) {
          try {
            this.tableData = JSON.parse(response.message);
          } catch (error) {
            console.error("解析数据失败:", error);
            this.$message.error("数据解析失败");
          }
        } else {
          this.$message.error("数据获取失败");
        }
      } catch (error) {
        console.log(error);
        this.$message.error("请求数据失败");
      } finally {
        this.Loading = false;
      }
    },

    derive() {
      this.download(
        "appeal/complain/export",
        {
          appealType: this.appealType,
          statet: this.statet
        },
        `complain_${new Date().getTime()}.xlsx`
      );
    },

    download(url, params, fileName) {
      // 实现文件下载的逻辑
      // 例如，通过axios发起请求，然后处理返回的blob数据
      // 具体实现依据你的需求和下载库
    },

    tableRowClassName({row, rowIndex}) {
      // 自定义表格行样式的逻辑
      return '';
    }
  }
}
</script>


<style scoped>
.box {
  margin-left: 30px;
  margin-top: 20px;
}
</style>